<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/element.css?v=1">
    <script src="../../js/zyrpublic.js?v=1.0"></script>
    <script src="../../js/zyrfunction.js?v=1.0"></script>
    <script src="../../javascript/vue.js"></script>
    <script src="../../javascript/elementui.js"></script>
    <script src="../../javascript/axios.min.js"></script>
</head>
<style>
    /* .el-button--primary {
        background-color: #11947F !important;
    } */
    .el-dialog__header {
        background-color: #129280;
        padding-bottom: 15px !important;
        padding-top: 15px !important;
    }

    .el-dialog__header>.el-dialog__title {
        color: #fff;
    }

    .el-dialog__headerbtn .el-dialog__close {
        color: #fff !important;
        font-size: 20px;
    }

    .el-form-item {
        margin-bottom: 10px;
    }

    .el-radio {
        margin-bottom: 10px;
    }

    .el-radio-group {
        margin-top: 10px;
    }
</style>

<body>
    <div class="page-wrap" id="app">
        <section class="page-hd t">
            <header>
                <h5 class="title">
                    <a href="#" class="red">积分优惠券</a>
                </h5>
            </header>
            <hr />
        </section>
        <el-tabs type="border-card" @tab-click="handleClickTab">
            <el-tab-pane label="普通优惠券">
            </el-tab-pane>
            <el-tab-pane label="活动商品优惠券"></el-tab-pane>
            <el-tab-pane label="指定商品优惠券"></el-tab-pane>
            <el-tab-pane label="高级兑换区"></el-tab-pane>
            <div style="margin-bottom: 20px;">
                <el-button type="primary" @click="addDiaFn">新增</el-button>
                <el-button plain @click="fndelCoupon">删除</el-button>
            </div>
            <el-table @selection-change="handleSelectionChange"
                :header-cell-style="{background:'#f7f4f8', color:'#000'}" :data="tableCouponList" tooltip-effect="dark"
                style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="优惠券类型" width="120">
                    <template slot-scope="scope">
                        {{filterCouponType(scope.row.useScope)}}
                    </template>
                </el-table-column>
                <el-table-column label="优惠券名称" prop="name" width="160">
                </el-table-column>
                <el-table-column prop="val" label="优惠券价值">
                </el-table-column>
                <el-table-column label="兑换积分" prop="glodnum">
                </el-table-column>
                <!-- <el-table-column label="数量" prop="num">
                </el-table-column> -->
                <el-table-column label="剩余" prop="num">
                </el-table-column>
                <el-table-column label="时间">
                    <template slot-scope="scope">
                        {{ scope.row.starttime.substr(0, 10)}} {{ scope.row.endtime.substr(0, 10)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <span @click.stop="fneditCoupon(scope.row)" style="color: #11947F; display: inline-block;"> <i
                                class="el-icon-edit"></i>编辑</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChangeTwo" @current-change="handleCurrentChangeTwo"
                :current-page="pageNumTwo" :page-size="pageSizeTwo" layout="total, sizes, prev, pager, next"
                :total="talLengthTwo">
            </el-pagination>
        </el-tabs>

        <el-dialog :title="diaTitle" :visible.sync="addVis" width="60%" :close-on-click-modal="false"
            @close="addVis = false">
            <div>
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="类型">
                        <el-select v-model="useScopeName" :placeholder="currentCouponType" @change="change">
                            <el-option label="普通商品优惠券" value="普通商品优惠券"></el-option>
                            <el-option label="活动商品优惠券" value="活动商品优惠券"></el-option>
                            <el-option label="指定商品优惠券" value="指定商品优惠券"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.useScope == 2" label="选择商品">
                        <i @click="handleChooseGoods" style="font-size: 42px; border: 1px solid #ccc; color: #ccc;"
                            class="el-icon-plus"></i>
                        <span v-if="chooseGood.id" @click="delChooseGood"
                            style="display: inline-block; margin-left: 30px; position: relative;">选中商品 <img
                                style="width: 80px; height: 60px;" :src="visitimgurl + chooseGood.productEntity.headimg"
                                alt="点击可删除"> <span
                                style="position: absolute; bottom: -10px; right: 5px; color: red;">点击可删除</span> </span>
                    </el-form-item>

                    <el-form-item label="活动类型" v-if="form.useScope == 1">
                        <el-radio-group v-model="form.activityType">
                            <el-radio :label="1">秒杀</el-radio>
                            <el-radio :label="2">拼单</el-radio>
                            <el-radio :label="3">限时特惠</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="优惠卷名称">
                        <el-input style="width: 65%" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠卷面值">
                        <el-input style="width: 65%" v-model="form.val"></el-input>
                    </el-form-item>
                    <el-form-item label="最少满足金额">
                        <el-input style="width: 60%;" v-model="form.fullmoney"></el-input>

                    </el-form-item>
                    <el-form-item label="领取有效时间">
                        <el-date-picker style="width: 380px;" value-format="yyyy-MM-dd HH:mm:ss" v-model="timer"
                            type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <!-- <el-input style="width: 65%" v-model="form.name2"></el-input> -->
                    </el-form-item>
                    <el-form-item label="使用有效时间">
                        <el-input style="width: 65%" v-model="form.days"></el-input>
                    </el-form-item>
                    <el-form-item label="兑换积分">
                        <el-input style="width: 65%" v-model="form.glodnum"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠券总量">
                        <el-input style="width: 65%" v-model="form.num"></el-input>
                    </el-form-item>
                    <el-form-item label="每人限领量">
                        <el-input style="width: 65%" v-model="form.onlynum"></el-input>
                    </el-form-item>

                    <el-form-item label="显示位置">
                        <el-radio-group v-model="form.displayPosition">
                            <el-radio :label="1">普通优惠券区</el-radio>
                            <el-radio :label="2">活动商品优惠卷区</el-radio>
                            <el-radio :label="3">指定商品优惠卷区</el-radio>
                            <el-radio :label="4">高级会员优惠券兑换区</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="fnaddCoupon">{{btnText}}</el-button>
                        <el-button @click="addVis = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-dialog width="80%" title="选择商品" :visible.sync="innerVisible" :close-on-click-modal="false"
                append-to-body>
                <div>
                    <div style="display: flex;">
                        <el-input style="margin-right: 20px;" v-model="pid" placeholder="请输入商品id"></el-input>
                        <el-input style="margin-right: 20px;" v-model="identify" placeholder="请输入商品编号"></el-input>
                        <el-input style="margin-right: 20px;" v-model="inputname" placeholder="请输入商品名称"></el-input>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                    </div>
                    <el-table :data="tableGoodsData" tooltip-effect="dark" style="width: 100%">
                        <el-table-column label width="35">
                            <template slot-scope="scope">
                                <el-radio :label="scope.$index" :value="templateRadio"
                                    @change.native="getTemplateRow(scope.$index,scope.row)">&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品ID" prop="id" width="120">

                        </el-table-column>
                        <el-table-column label="商品编号" prop="productEntity.identify" width="120">
                        </el-table-column>
                        <el-table-column prop="productEntity.title" label="商品名称" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="商品图片">
                            <template slot-scope="scope">
                                <img style="width: 80px; height: 80px;"
                                    :src=" visitimgurl + scope.row.productEntity.headimg" alt="">
                            </template>

                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 20px; display: flex;">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="pageNum" :page-size="pageSize" layout="total, sizes, prev, pager, next"
                            :total="talLength">
                        </el-pagination>
                        <el-button style="margin-left: 30px;" type="primary" @click="innerVisible = false">确认选中商品
                        </el-button>
                    </div>
                </div>
            </el-dialog>
            <!-- 
            <span slot="footer" class="dialog-footer">
                <el-button style="margin-right: 30px" round type="primary">确 认</el-button>
                <el-button @click="addVis = false" round>取 消</el-button>
            </span> -->
        </el-dialog>
    </div>
    <!---page-wrap------>
</body>

<script>
    var instance = axios.create({
        baseURL: httpurl,
        timeout: 3000,
        headers: {
            "Content-Type": "application/json",
            Authorization: GetTokenInfo(),
        },
    });
</script>

<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                visitimgurl: visitimgurl,
                innerVisible: false,
                diaTitle: '新增优惠券',
                btnText: '立即创建',
                addVis: false,
                timer: [],
                form: {
                    activityType: null,
                    displayPosition: 1,
                    val: "",
                    glodnum: "",
                    num: "",
                    onlynum: "",
                    name: "",
                    starttime: '',
                    endtime: '',
                    days: '',
                    fullmoney: '',
                    useScope: '',
                    typeid: '24',
                    pid: ''
                },
                useScopeName: '',
                tableGoodsData: [],
                multipleSelection: [],
                templateRadio: '',
                pageNum: 1,
                pageSize: 10,
                talLength: 100,
                inputname: '',
                identify: '',
                pid: '',
                chooseGood: {},
                tableCouponList: [],
                talLengthTwo: 10,
                pageSizeTwo: 10,
                pageNumTwo: 1,
                delListId: [],
                currentCouponType: '请选择'
            };
        },

        mounted() {
            this.getCouponList()
        },

        methods: {
            handleClickTab(e) {
                console.log(e);
                this.tableCouponList = []
                let index = +e.index + 1
                this.pageNumTwo = 1
                this.pageSizeTwo = 10
                this.form.displayPosition = index + ''
                this.getCouponList()


            },
            //查询优惠券列表

            getCouponList() {
                this.tableCouponList = []
                this.talLengthTwo = 0
                let data = {
                    typeid: '24',
                    displayPosition: this.form.displayPosition,
                    pageNo: this.pageNumTwo,
                    pageSize: this.pageSizeTwo

                }
                instance.get('queryIntegralCouponList', {
                    params: data
                }).then(res => {
                    console.log(res);
                    if (res.data.rtnCode == 200) {
                        this.tableCouponList = res.data.data.list
                        this.talLengthTwo = res.data.data.total

                    } else {
                        this.tableCouponList = []
                        this.talLengthTwo = 0
                    }
                })
            },
            //
            addDiaFn() {
                this.addVis = true
                this.diaTitle = '新增优惠券'
                this.btnText = '立即创建'
            },

            // 新增或编辑优惠券
            fnaddCoupon() {
                if (this.diaTitle == '新增优惠券') {
                    this.form.pid = this.chooseGood.id
                    instance.post('insertIntegralCoupon', this.form)
                        .then(res => {
                            console.log(res);
                            if (res.data.rtnCode == 200) {
                                this.addVis = false
                                this.$message.success(res.data.msg)
                                this.getCouponList()
                            } else {
                                this.$message.error(res.data.msg)
                            }
                        })
                } else if (this.diaTitle == '编辑优惠券') {
                    console.log(this.form);
                    instance.post('updateIntegralCoupon', this.form)
                        .then(res => {
                            console.log(res);
                            if (res.data.rtnCode == 200) {
                                this.addVis = false
                                this.$message.success(res.data.msg)
                                this.getCouponList()
                            } else {
                                this.$message.error(res.data.msg)
                            }
                        })
                }

            },
            //编辑优惠券
            fneditCoupon(val) {
                this.timer = []
                this.addVis = true
                this.diaTitle = '编辑优惠券',
                    this.btnText = '编辑完成'
                this.form = val
                this.useScopeName = this.filterCouponType(val.useScope)
                this.timer.push(val.starttime)
                this.timer.push(val.endtime)
            },
            change(v) {
                console.log(v);
                this.form.useScope = this.filterCouponType2(v)
            },
            // 筛选商品
            handleSearch() {
                if (this.inputname == '' && this.identify == '' && this.pid == '') {
                    return this.$message.warning('搜索参数不能为空')
                }
                this.tableGoodsData = []
                this.getGoodList()
            },
            //
            getGoodList() {
                let data = {
                    inputname: this.inputname,
                    identify: this.identify,
                    pid: this.pid,
                    pageNo: this.pageNum,
                    pageSize: this.pageSize,
                    isshelves:1
                }
                instance.get('Productlistpc', {
                    params: data
                })
                    .then(res => {
                        console.log(res);
                        if (res.data.rtnCode == 200) {
                            this.tableGoodsData = res.data.data.list
                            this.talLength = res.data.data.total
                            console.log(this.talLength);
                        }
                    })
            },

            //
            handleChooseGoods() {
                this.innerVisible = true
                this.getGoodList()
            },
            //
            getTemplateRow(index, row) {
                console.log(index, row);
                this.templateRadio = index
                this.chooseGood = row
            },
            //
            delChooseGood() {
                this.chooseGood.id = ''
                this.chooseGood = {}
            },
            //
            handleSizeChange(val) {
                console.log(val);
                this.pageSize = val
                this.getGoodList()
            },
            handleCurrentChange(val) {
                console.log(val);
                this.pageNum = val
                this.getGoodList()
            },
            //
            handleSizeChangeTwo(val) {
                this.pageSizeTwo = val
                this.getCouponList()
            },
            //
            handleCurrentChangeTwo(val) {
                this.pageNumTwo = val
                this.getCouponList()
            },
            // 选择优惠券
            handleSelectionChange(val) {
                console.log(val);
                val.forEach(v => {
                    this.delListId.push(v.id)
                })
            },
            // 删除优惠券
            async fndelCoupon() {
                console.log('123');
                let confirmResult = await this.$confirm(
                    "此操作将永久删除该数据, 是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).catch(err => err);
                if (confirmResult !== "confirm") {
                    return this.$message.info("已取消删除！");
                }
                let res = await instance.post('updateIntegralCoupon', {
                    deleted: 1,
                    idList: this.delListId
                })
                console.log(res);
                if (res.data.rtnCode == 200) {

                    this.$message.success('删除优惠卷成功')
                    this.getCouponList()
                } else {
                    this.$message.error('删除优惠卷失败')
                }
            },


            //
            filterCouponType(val) {
                if (val == '0') return '普通商品优惠券'
                if (val == '1') return '活动商品优惠券'
                if (val == '2') return '指定商品优惠券'
            },
            filterCouponType2(val) {
                if (val == '普通商品优惠券') return 0
                if (val == '活动商品优惠券') return 1
                if (val == '指定商品优惠券') return 2
            }

        },

        watch: {
            timer: function (e) {

                if (e) {
                    this.form.starttime = e[0]
                    this.form.endtime = e[1]
                } else if (e == null) {
                    this.form.starttime = ''
                    this.form.endtime = ''
                }

            }
        },
    });
</script>

</html>